<!--模板-->
<template>
  <!--最外层-->
  <div class="right-panel">

    <!--上部-->
    <div class="top-panel">
      <dv-border-box1  background-color="rgba(0, 200, 255, 0.3)">
        <div class="top-title">
          <dv-decoration-8 style="width:120px;height:20px;" />
          <div style="font-weight: bold">种植环境监测</div>
          <dv-decoration-8 :reverse="true" style="width:120px;height:20px;" />
        </div>
        <div class="content">
          <div class="row">
            <div class="column">
              <dv-border-box2 background-color="rgb(1, 50, 32)">
                <div class="data-container">
                  <div class="data-title">大棚编号</div>
                  <div class="data-boder">
                    <dv-border-box7>
                      <div class="data-content">
                        <div>{{inputGreenhouseSummary["name"]}}</div>
                      </div>
                    </dv-border-box7>
                  </div>
                </div>

              </dv-border-box2 >
            </div>
            <div class="column">
              <dv-border-box2 background-color="rgb(1, 50, 32)">
                <div class="data-container">
                  <div class="data-title">设备总数</div>
                  <div class="data-boder">
                    <dv-border-box7>
                      <div class="data-content">
                        <div>{{inputGreenhouseSummary["deviceCount"]}}</div>
                        <div class="cu">个</div>
                      </div>
                    </dv-border-box7>
                  </div>
                </div>

              </dv-border-box2>
            </div>
            <div class="column">
              <dv-border-box2 background-color="rgb(1, 50, 32)">
                <div class="data-container">
                  <div class="data-title">土壤PH值</div>
                  <div class="data-boder">
                    <dv-border-box7>
                      <div class="data-content">
                        <div>{{inputGreenhouseData["土壤PH值"]}}</div>
                        <div class="cu">ph</div>
                      </div>
                    </dv-border-box7>
                  </div>
                </div>

              </dv-border-box2>
            </div>
            <div class="column">
              <dv-border-box2 background-color="rgb(1, 50, 32)">
                <div class="data-container">
                  <div class="data-title">土壤温度</div>
                  <div class="data-boder">
                    <dv-border-box7>
                      <div class="data-content">
                        <div>{{inputGreenhouseData["土壤温度"]}}</div>
                        <div class="cu">℃</div>
                      </div>
                    </dv-border-box7>
                  </div>
                </div>

              </dv-border-box2>
            </div>
          </div>
          <div class="row">
            <div class="column">
              <dv-border-box2 background-color="rgb(1, 50, 32)">
                <div class="data-container-2">
                  <div class="data-title-2">土壤氮含量</div>
                  <div class="data-boder-2">
                    <dv-border-box7>
                      <div class="data-content-2">
                        <div>{{inputGreenhouseData["土壤氮含量"]}}</div>
                        <div class="cu">mk/Kg</div>
                      </div>
                    </dv-border-box7>
                  </div>
                </div>
              </dv-border-box2>
            </div>
            <div class="column">
              <dv-border-box2 background-color="rgb(1, 50, 32)">
                <div class="data-container-2">
                  <div class="data-title-2">土壤磷含量</div>
                  <div class="data-boder-2">
                    <dv-border-box7>
                      <div class="data-content-2">
                        <div>{{inputGreenhouseData["土壤磷含量"]}}</div>
                        <div class="cu">mk/Kg</div>
                      </div>
                    </dv-border-box7>
                  </div>
                </div>
              </dv-border-box2>
            </div>
          </div>
        </div>
      </dv-border-box1>
    </div>

    <div class="bottom-panel">
      <dv-border-box13 background-color="rgb(1, 50, 32)">
        <div class="bottom-content">
          <div class="title">
            <dv-decoration-8 style="width:120px;height:30px;" />
            <div style="font-weight: bold">智慧大棚实时环境监测</div>
            <dv-decoration-8 :reverse="true" style="width:120px;height:30px;" />
          </div>
          <div class="under-title">
            <div class="dashboard">
              <dv-border-box8 background-color="rgb(1, 50, 32)">
                <div class="dashboard-container">
                  <!--温度计节点-->
                  <div class="table" ref="temperContainer"></div>
                  <div class="text">
                    <dv-border-box11>
                      <div>大棚实时温度</div>
                    </dv-border-box11>
                  </div>
                </div>
              </dv-border-box8>
            </div>
            <div class="dashboard">
              <dv-border-box8 background-color="rgb(1, 50, 32)">
                <div class="dashboard-container">
                  <div class="table" ref="humidContainer"></div>
                  <div class="text">
                    <dv-border-box11>
                      <div>大棚实时湿度</div>
                    </dv-border-box11>
                  </div>
                </div>
              </dv-border-box8>
            </div>
          </div>
        </div>
      </dv-border-box13>
    </div>



  </div>

</template>


<!--样式-->
<style scoped>
.right-panel {
    display: flex;                /* 设置为 Flexbox 布局 */
    flex-direction: column;        /* 子元素垂直排列 */
    height: 100%;                  /* 父容器高度为 100%（占满父元素） */
    width: 100%;
    box-sizing: border-box;
  }
.top-panel{
  flex: 2;                       /* 使每个子元素占据相同的高度 */
  display: flex;                 /* 可选：为了让内部内容居中 */
  align-items: center;           /* 垂直居中 */
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;

}

.bottom-panel {
  flex: 2;                       /* 使每个子元素占据相同的高度 */
  display: flex;                 /* 可选：为了让内部内容居中 */
  align-items: center;           /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  box-sizing: border-box;
  }
.content {
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  height: 100%;
  width: 100%; /* 让 content 宽度撑满父容器 */
  box-sizing: border-box; /* 确保 padding 不会影响整体布局 */
  padding: 15px 15px 35px 15px;
}

.mid-content {
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  height: 100%;
  width: 100%; /* 让 content 宽度撑满父容器 */
  padding: 15px; /* 设置 content 的内边距 */
  padding-top: 5px;
  box-sizing: border-box; /* 确保 padding 不会影响整体布局 */
}
.device-charts{
  flex: 1;
  width: 100%;
  height: 100%;
}
.bottom-content {
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 垂直排列子元素 */
  width: 100%; /* 让 content 宽度撑满父容器 */
  height: 100%; /* 让 content 高度撑满父容器 */
  padding: 10px; /* 设置 content 的内边距 */
  box-sizing: border-box; /* 确保 padding 不会影响整体布局 */
  max-width: 100%;
}

/* title 占满 content 宽度，位于上部 */
.title {
  display: flex; /* 使用 flex 布局 */
  justify-content: space-between; /* 让三个元素分布在两侧，居中间隔 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 宽度撑满父容器 */

}
.top-title{
  display: flex; /* 使用 flex 布局 */
  justify-content: space-between; /* 让三个元素分布在两侧，居中间隔 */
  align-items: center; /* 垂直居中 */
  width: 100%; /* 宽度撑满父容器 */
  margin-top: 10px;
}
/* under-title 占据 content 剩余的空间 */
.under-title {
  display: flex; /* 使用 flex 布局 */
  flex: 1; /* 占满剩余空间 */
  justify-content: space-between; /* 让两个 dashboard 平分空间 */
  gap:3px; /* 添加间距，确保两个 dashboard 之间有一定的空隙 */
  padding: 5px;
  max-width: 100%;
  box-sizing: border-box;
}

/* dashboard 容器 */
.dashboard {
  flex: 1; /* 使两个 dashboard 平分空间 */
  display: flex; /* 使内部元素能够排列 */
  flex-direction: column; /* 垂直排列，保证 text 在下方 */
  max-width: 100%;
  box-sizing: border-box;
}

/* dashboard 内部内容的布局 */
.dashboard-container {
  display: flex; /* 使用 flex 布局 */
  flex-direction: column; /* 垂直排列 table 和 text */
  height: 100%; /* 让 container 高度占满 dashboard */
  padding: 5px;
  max-width: 100%;
  box-sizing: border-box;
}
.table {
  width: 100%; /* 使 ECharts 容器占满父容器的宽度 */
  height: 65%; /* 设置固定高度，确保 ECharts 显示 */
  margin-bottom: 10px; /* 为图表和名称之间留出间距 */
  box-sizing: border-box;
}

.text {
  font-size: 18px; /* 设置文本的字体大小 */
  font-weight: bold; /* 设置字体加粗 */
  text-align: center; /* 水平居中对齐文本 */
  margin-top: 10px; /* 为名称和图表之间留出间距 */
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
}
.line-container {
  display: flex;
  width: 100%;
  height: 100%;
  padding:  8px;
  box-sizing: border-box;
}
.line-chart {
  width: 100%;
  height: 100%;
}

.under-title-2 {
  display: flex; /* 使用 flex 布局 */
  flex: 1; /* 占满剩余空间 */
  justify-content: space-between; /* 让两个 dashboard 平分空间 */
  gap: 3px; /* 添加间距，确保两个 dashboard 之间有一定的空隙 */
  padding: 0px;
}


.row {
  display: flex;
  justify-content: space-around; /* 横向排列各个column，间距相等 */
  flex: 1; /* 每一行占据相等的空间 */
}

.column {
  display: flex;
  justify-content: space-around; /* 纵向间距相等 */
  flex: 1;
  flex-direction: column; /* 垂直排列子元素 */
}
.data-container {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column; /* 每一列纵向排列div */
}
.data-title {
  display: flex;
  flex:2;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 15px;

}
.data-boder {
  display: flex;
  flex:3;
  padding: 8px;
  padding-bottom: 12px;
}
.data-content {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: red;
  flex-direction:row;

}
.data-container-2 {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column; /* 每一列纵向排列div */
}
.data-title-2 {
  display: flex;
  flex:1;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  padding-top: 8px;

}
.data-content-2 {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-family: lcddigital;
  font-size: 50px;
  color: red;
  flex-direction:row;

}

.data-boder-2{
  display: flex;
  flex:4;
  padding: 5px 20px 20px 20px;
}
.cu{
  font-size: 15px;
  color: aqua;
}
</style>



<!--行为-->
<script>
import * as echarts from "echarts";

export default {
  props: {

    inputGreenhouseData: {
      type: Object,
      required: true
    },
    inputGreenhouseSummary:{
      type: Object,
      required: true
    },

  },

  data() {
    return {
      temperatureChart: null, // 存储温度图表实例
      humidityChart: null, // 存储湿度图表实例
      lineChart: null, // 存储折线图实例
      temperatureValue: this.inputGreenhouseData["空气温度"]/10, // 初始温度
      humidityValue: this.inputGreenhouseData["空气相对湿度"]/10, // 初始湿度
    };
  },

  beforeDestroy() {
    // 销毁ECharts实例
    if (this.temperatureChart) this.temperatureChart.dispose();
    if (this.humidityChart) this.humidityChart.dispose();
    if (this.lineChart) this.lineChart.dispose();

    // 清除resize事件监听
    window.removeEventListener('resize', this.handleResize);
  },

  methods: {
    // 通用配置项
    commonGaugeOption(min, max, gradient, value, unit) {
      return {
        title: {
          text: unit === '℃' ? '空气温度表' : '空气湿度表',
          textStyle: {
            color: '#ffffff',
            fontSize: 16
          },
          top: '5%', // 标题距离容器顶部的距离
          left: 'center'
        },
        series: [
          {
            type: 'gauge',
            min: min,
            max: max,
            startAngle: 180, // 设置开始角度
            endAngle: 0, // 设置结束角度
            radius: '90%', // 设置半径，使其显示为半圆
            center: ['50%', '65%'], // 仪表盘的位置，X轴居中，Y轴向下移动
            axisLine: {
              lineStyle: {
                width: 20, // 圆的宽度
                color: [
                  [0.2, '#ffcccc'], // 20% 范围为浅红色
                  [0.8, '#ff6666'], // 80% 范围为中红色
                  [1, '#cc0000']    // 剩余范围为深红色
                ] // 设置渐变颜色
              }
            },
            axisTick: {
              length: 8, // 刻度线长度
              distance: -5, // 刻度线距离轴线的距离
              lineStyle: {
                color: '#ffffff', // 刻度线颜色
                width: 1
              }
            },
            splitLine: {
              length: 15, // 分隔线长度
              distance: -5, // 分隔线距离轴线的距离
              lineStyle: {
                color: '#ffffff', // 分隔线颜色
                width: 2
              }
            },
            axisLabel: {
              distance: 15, // 与轴线的距离
              interval: 1, // 每个刻度都显示标签
              formatter: function (value) {
                // 根据单位动态设置刻度显示规则
                if (unit === '℃') {
                  // 温度仪表盘显示 0, 10, 20, 30, 40, 50
                  return [0, 10, 20, 30, 40, 50].includes(value) ? `${value}${unit}` : '';
                } else if (unit === '%') {
                  // 湿度仪表盘显示 0, 20, 40, 60, 80, 100
                  return [0, 20, 40, 60, 80, 100].includes(value) ? `${value}${unit}` : '';
                }
                return ''; // 默认不显示
              },
              color: '#ffffff', // 标签颜色
              fontSize: 12 // 标签字体大小
            },


            detail: {
              valueAnimation: true,
              formatter: `{value}${unit}`,
              color: '#ffffff',
              fontSize: 20
            },
            data: [
              {
                value: isNaN(value) ? 0 : value, // 防止 NaN
                name: unit === '℃' ? '温度' : '湿度'
              }
            ]
          }
        ]
      };
    },




    // 设置温度图表
    setTemperatureChart() {
      const temperatureOption = this.commonGaugeOption(
          0, // 最小值
          50, // 最大值
          ['#67e0e3', '#37a2da', '#fd666d'], // 渐变颜色
          this.temperatureValue, // 当前温度值
          '℃' // 单位
      );
      this.temperatureChart.setOption(temperatureOption);
    },


    // 设置湿度图表
    setHumidityChart() {
      const humidityOption = this.commonGaugeOption(
          0,
          100,
          [
            [0.2, '#67e0e3'],
            [0.8, '#37a2da'],
            [1, '#fd666d']
          ],
          this.humidityValue,
          '%',
          'Humidity'
      );
      this.humidityChart.setOption(humidityOption);
    },

    // 响应resize事件
    handleResize() {
      this.temperatureChart.resize();
      this.humidityChart.resize();
      this.lineChart.resize();
    },

    updateData() {
      // 更新温度和湿度值（模拟数据）
      this.temperatureValue = this.inputGreenhouseData["空气温度"]/10;
      this.humidityValue = this.inputGreenhouseData["空气相对湿度"]/10;
      // 更新图表
      this.setTemperatureChart();
      this.setHumidityChart();
    },

  },
  mounted() {
    // 获取容器元素
    const temperatureDom = this.$refs.temperContainer;
    const humidityDom = this.$refs.humidContainer;

    // 初始化图表
    this.temperatureChart = echarts.init(temperatureDom);
    this.humidityChart = echarts.init(humidityDom);

    // 设置初始配置
    this.setTemperatureChart();
    this.setHumidityChart();
    // 监听窗口大小变化，重新调整图表大小
    // window.addEventListener('resize', this.handleResize);
    // 定时更新温湿度数据
    setInterval(this.updateData, 2000);


  },

};

</script>